<!--  -->
<template>
  <div class="sale-container">
    <chart-title
      title="订单统计"
      @click="handleMore"
    />
    <div
      v-loading="loading"
      class="chart-container"
      style="width:100%;height:100%;min-height:200px;padding:20px 20px 0px;box-sizing:border-box;"
    >
      <div class="filter-container">
        <date-select
          ref="dateSelectRef"
          @dateChange="dateChange"
        />
      </div>
      <div
        id="orderChart"
        style="width:100%;height:100%;min-height:200px;"
      />
    </div>
  </div>
</template>

<script>
import {inject, onMounted, reactive, ref, toRefs} from 'vue'
// echarts
import * as echarts from 'echarts'
import DateSelect from './dateSelect.vue'
import ChartTitle from './chartTitle.vue'
import {useRouter} from 'vue-router'

export default {
  components: {
    ChartTitle,
    DateSelect,
  },
  setup(props, context) {
    const router = useRouter()
    const api = inject('api')
    var dateSelectRef = ref(null)
    var reactiveData = reactive({
      loading: true,
      option: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 20, // 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
          data: [
            '订单金额（元）',
            '配送商配送金额（元）',
            '厂家配送金额（元）',
          ],
        },
        color: ['#6386eb', '#ffb96c', '#72d0ad'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        // x轴样式
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
          data: [],
        },
        // y轴样式
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#A2C9AF',
              width: 1,
              type: 'solid',
            },
          },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return '#666'
              },
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F0F0F0'],
              width: 1,
              type: 'dashed',
            },
          },
        },
        series: [],
      },
      filterData: {
        statisticsType: '6',
        startTime: null,
        endTime: null,
      },
    })
    const handleMore = () => {
      var type = dateSelectRef.value?.dateType() || '1'
      router.push({
        path: '/statistics/orderStatistics',
        query: {
          type: type,
        },
      })
    }
    const dateChange = (val, bool) => {
      reactiveData.filterData.startTime = val[0]
      reactiveData.filterData.endTime = val[1]
      if (bool) {
        chartInit()
      }
    }
    const chartInit = async() => {
      var chartDom = document.getElementById('orderChart')
      chartDom.removeAttribute('_echarts_instance_')
      var myChart = echarts.init(chartDom)
      var res = await api.dashboard.GET_STATISCS_DATA(reactiveData.filterData)
      if (res.code === 0) {
        reactiveData.loading = false
        var obj = res.data
        reactiveData.option.xAxis.data = obj.data
        reactiveData.option.series = obj.series
        reactiveData.option.legend.data = obj.series.map((p) => p.name)
      } else {
        reactiveData.loading = false
      }
      // 绘制图表
      myChart.setOption(reactiveData.option)
      window.onresize = function() {
        // 自适应大小
        myChart.resize()
      }
    }
    onMounted(() => {
      console.log(444)
      chartInit()
    })
    return {
      dateSelectRef,
      ...toRefs(reactiveData),
      dateChange,
      handleMore,
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.sale-container {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .chart-container {
    position: relative;
    .filter-container {
      position: absolute;
      right: 20px;
      top: -4px;
      z-index: 10;
    }
  }
}
</style>
